<template>
  <div>
    <el-card class="!border-none" shadow="never">
      <el-page-header content="添加用户" @back="$router.back()"/>
    </el-card>
    <el-card class="mt-4 !border-none" header="基本资料" shadow="never">
      <el-form ref="formRef" class="ls-form" :model="formData" label-width="120px">
        <el-form-item label="头像：">
          <div>
            <div>
              <material-picker v-model="formData.avatar" :limit="1"/>
            </div>
            <div class="form-tips">建议尺寸：240*240px</div>
          </div>
        </el-form-item>
        <!--				<el-form-item label="账号：">-->
        <!--					<el-input v-model="formData.account" class="w-[280px]">-->
        <!--					</el-input>-->
        <!--				</el-form-item>-->
        <el-form-item label="姓名：">
          <el-input v-model="formData.real_name" class="w-[280px]">
          </el-input>
        </el-form-item>
        <el-form-item label="联系电话：">
          <el-input v-model="formData.mobile" class="w-[280px]">
          </el-input>
        </el-form-item>
        <el-form-item label="科室信息：" prop="department">
          <el-cascader :options="optionsData.department" clearable v-model="formData.department" filterable/>
        </el-form-item>
      </el-form>
    </el-card>
    <footer-btns>
      <el-button type="primary" @click="handleSave">保存</el-button>
    </footer-btns>
  </div>
</template>

<script lang="ts" setup name="consumerDetail">
import type {FormInstance} from 'element-plus'
import {userAdd} from '@/api/consumer'
import {isEmpty} from '@/utils/util'
import useMultipleTabs from '@/hooks/useMultipleTabs'
import {
  departmentList
} from '@/api/room/room_department_device'
import {useDictOptions} from '@/hooks/useDictOptions'

const router = useRouter()
const {optionsData} = useDictOptions<{
  department: any[]
}>({
  department: {
    api: departmentList
  }
})

const formData = reactive({
  avatar: '',
  mobile: '',
  real_name: '',
  department: [],
  account: ''
})

const {removeTab} = useMultipleTabs()

const formRef = shallowRef<FormInstance>()

const handleEdit = async (value: string, field: string) => {
  if (isEmpty(value)) return
  //@ts-ignore
  formData[field] = value
}
const handleSave = async () => {
  await userAdd(formData)
  removeTab()
  router.back()
}
</script>